<template>
  <div class="icons">
    <wc-swiper :autoplay="false">
      <wc-slide v-for="(page, index) of pages" :key="index">
        <div class="icon active" v-for="(item,indexb) of page" :key="item.id">
          <div @click="iconJump(item.id)">
            <div class='icon-img'>
              <img :src='item.imgUrl'/>
            </div>
            <p class="icon-desc">{{item.desc}}</p>
          </div>
        </div>
      </wc-slide>
    </wc-swiper>
  </div>
</template>

<script>
  export default {
    name: 'Icons',
    props: {
      list: Array
    },
    data() {
      return {
        b: '01',
        swiperOption: {
          autoplay: false
        }
      }
    },
    computed: {
      pages() {
        const pages = []
        this.list.forEach((item, index) => {
          const page = Math.floor(index / 4)
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      }
    },
    methods: {
      iconJump(b) {
        this.$emit('jump', b);
      },
    }
  }
</script>

<style lang="less" scoped>
  .icons {
    border-top: 4px solid #f5f5fa;
    border-bottom: 4px solid #f5f5fa;
    text-align: left;
    /deep/ .wc-pagination {
      display: none !important
    }
    .icon {
      width: 24%;
      height: 24%;
      display: inline-block;
      .icon-img {
        padding: 14px 24px 4px 24px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .icon-desc {
        text-align: center;
        font-size: 12px;
        padding-bottom: 14px;
      }
    }
    .icon:nth-child(1) {
      margin-left: 2%;
      background-color: #f5f5fa
    }
    .icon:last-child {
      margin-right: 2%;
    }
  }


</style>
